<template>
  <div ref="chart" class="chart"></div>
</template>

<script>
import * as echarts from 'echarts';

let chartInstance = null;

export default {
  name: 'MyEcharts',
  // 变量
  // 逻辑
  // 插槽
  props: {
    option: Object,
  },
  mounted () {
    // 初始化echarts
    chartInstance = echarts.init(this.$refs.chart);
    // 传入option
    chartInstance.setOption(this.option);
  },
  watch: {
    option (newVal) {
      chartInstance.setOption(newVal);
    },
  },
}
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>
